<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
    <div style="height: 100px; position: relative;">
      <div style="width: 100%; text-align: center; color: white; font-size: 45px;">IOT可视化平台</div>
      <div style="width: 100%; height: 40px;">
      </div>
    </div>
    <data-view-device-data/>
    <div style="flex: 1; display: flex;">
      <div style="flex: 1; display: flex; flex-direction: column;">
        <div style="flex: 1; display: flex;">
        </div>
        <div style="flex: 1;">
        </div>
      </div>
      <div style="flex: 2; display: flex; flex-direction: column;">
        <canvas id="three-canvas-box" ref="threeCanvasBox" style="flex: 1;"></canvas>
        <div style="flex: 1;"></div>
      </div>
      <div style="flex: 1; display: flex; flex-direction: column;">
        <div style="flex: 1;"></div>
        <div style="flex: 1;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import DataViewDeviceData from '@/pages/dataView/components/DataViewDeviceData.vue'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

export default {
  name: 'DataView',
  components: { DataViewDeviceData },
  mounted () {
    let canvas = this.$refs.threeCanvasBox
    console.log(canvas)
    let boxHeight = this.$refs.threeCanvasBox.offsetHeight
    let boxWidth = this.$refs.threeCanvasBox.offsetWidth
    let scene = new THREE.Scene()
    let camera = new THREE.PerspectiveCamera(
      45,
      boxWidth / boxHeight,
      1,
      1000
    )
    camera.position.set(0, 0, 50)
    let renderer = new THREE.WebGLRenderer({
      canvas,
      alpha: true,
      antialias: true
    })
    renderer.setSize(boxWidth, boxHeight)

    const controls = new OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true

    // 旋转中心点
    let pivotPoint = new THREE.Vector3(0, 0, 0)
    const pivotHelper = new THREE.AxesHelper(5)
    scene.add(pivotHelper)

    // 创建组来放置模型
    // 旋转组来旋转模型，解决模型中心点未对齐画布中心点问题
    const modelGroup = new THREE.Group()
    scene.add(modelGroup)

    let glftLoader = new GLTFLoader()
    glftLoader.load('/dataView/scene/scene.glb', (gltf) => {
      let model = gltf.scene
      // scene.add(model)moxi
      // 计算模型的边界框
      const bbox = new THREE.Box3().setFromObject(model)
      const center = bbox.getCenter(new THREE.Vector3())

      // model.position.sub(center)

      // 调整模型位置，使其中心位于原点
      // modelGroup.position.x = -center.x
      // modelGroup.position.y = -center.y
      // modelGroup.position.z = -center.z
      model.position.sub(center)

      // 更新旋转中心点
      // pivotPoint.copy(center)
      // pivotHelper.position.copy(pivotPoint)

      // gltf.scene.rotateY(Math.PI)

      // scene.add(gltf.scene)

      // renderer.render(scene, camera)

      // modelGroup.rotateY(Math.PI)
      modelGroup.add(model)
    })

    modelGroup.rotateX(Math.PI)

    let animate = () => {
      requestAnimationFrame(animate)
      controls.update()
      renderer.render(scene, camera)
    }

    animate()
  }
}
</script>

<style scoped>
.flex-box {
  display: flex;
  flex: 1;
}
</style>
